<template>
  <view>
	  <uni-segmented-control :current="current" :values="segmentedTitle" 
	   styleType="text" @clickItem="onClickItem" 
	  >
		  
	  </uni-segmented-control>
	  
	  <uni-card v-for="(item,index) in listElements">
		 <uni-row>
			 <uni-col style = "width: 85%;">
				 <uni-row>
				 			  <uni-col style = "width: 30%;">项目名称:</uni-col>
				 			  <uni-col style = "width: 70%;">{{item.name}}</uni-col>
				 </uni-row>
				 <uni-row>
				 			  <uni-col style = "width: 30%;">项目地点:</uni-col>
				 			  <uni-col style = "width: 70%;">{{item.place}}</uni-col>
				 </uni-row>
				 <uni-row>
				 			  <uni-col style = "width: 30%;">开始时间:</uni-col>
				 			  <uni-col style = "width: 70%;">{{item.startupTime}}</uni-col>
				 </uni-row>
				 
				 <uni-row>
				 			  <uni-col style = "width: 30%;">结束时间:</uni-col>
				 			  <uni-col style = "width: 70%;">{{item.endTime}}</uni-col>
				 </uni-row>
				 
				 <uni-row>
				 			  <uni-col style = "width: 30%;">质保年份:</uni-col>
				 			  <uni-col style = "width: 70%;">{{item.warrantyYear}}年</uni-col>
				 </uni-row>
				 
				 <uni-row>
				 			  <uni-col style = "width: 30%;">负责人:</uni-col>
				 			  <uni-col style = "width: 70%;">{{item.principal}}</uni-col>
				 </uni-row>
				 
				 <uni-row>
				 			  <uni-col style = "width: 30%;">联系方式:</uni-col>
				 			  <uni-col style = "width: 70%;">{{item.principalTel}}</uni-col>
				 </uni-row>
				 
				 				<uni-row>
				 							  <uni-col style = "width: 30%;">备注:</uni-col>
				 							  <uni-col style = "width: 70%;">{{item.remark}}</uni-col>
				 				</uni-row>
				 			  
			 </uni-col>
			 <uni-col style = "width: 15%;" >
				<image src="../static/images/project/ic_map.png" style="width: 60rpx;
				 height: 60rpx; " @click = "toMap(index)"></image>
				 <image src="../static/images/project/ic_tel.png" style="width: 60rpx;
				  height: 60rpx; " @click = "toTel(index)"></image>
				  <image src="../static/images/project/ic_dev.png" style="width: 60rpx;
				   height: 60rpx; " @click = "toDevice(index)"></image>
				
			 </uni-col>
		 </uni-row>
		
		 
		  
		  
			  
	  </uni-card>
	 
		  
	  
  </view>
</template>

<script>
import { getState } from '@/api/iot/project.js'	
  
  export default {
   
	data() {
		return {
		//后端数据
		segments:[],
		data:[],
		//数据对象
		stateElement:{
			state : 0,
			name : ""
		},
		detailElement:{
			 id : 0,
			 name : "",
			 state : 0,
			 place : "",
			 longitude : 0.0,
			 latitude : 0.0,
			 principal : "",
	         principalTel : "",
		     startupTime : "",
			 endTime : "",
             warrantyYear : "",
	         remark : ""
		},
		//视图对象
		segmentedTitle:["立项","施工","验收","竣工","完工"],
		segmentedState:[1,2,3,4,5],
		listElements:[],
		//ui联动对象
		current:0,
		
		}
	},
	
	//页面初始化
	onLoad() {
		this.getProjectVO()
	},
	
	methods:{
		getProjectVO(){
			getState().then(res => {
				this.segments = res.segments;
				this.data = res.data.data;
				this.current = 0;
				var state = this.segmentedState[0];
				this.displayStateProject(state);
			})
		},
		//切换时加载数据源
		onClickItem(selectItem){
			 var index =  selectItem.currentIndex;
			 var state = this.segmentedState[index];
			 this.displayStateProject(state);
		},
		//展示不同状态下得项目数据
		displayStateProject(stateV) {
			this.listElements = null;
			this.listElements = [];
			var j = 0 ;
			for(var i = 0; i < this.data.length; i++) {
				var detailState = this.data[i].state;
				if(detailState == stateV) {
					var temp = this.data[i];
					this.listElements[j] = temp;
					j++;
				 }
			} 
		},
		//去项目得具体信息种，即设备种
		goProjectDetail(index) {
			//alert(JSON.stringify(this.listElements[index]));
		},
		toMap(index) {
			var projectElement = this.listElements[index];
			MapContext.openMapApp({
				longitude: projectElement.longitude,
				latitude:  projectElement.latitude,
				destination: projectElement.place,
				success(){
					console("success");
				},
				fail(){
					console("fail");
				},
				complete() {
					console("complete");
				}
			})
			 alert("latitude:" + latitude + "\nlongtitude:" + longitude);
			 
		},
		toDevice(index) {
			var projectElement = this.listElements[index];
			var projectId = projectElement.id;
			var projectName = projectElement.name;
			this.$tab.navigateTo(`/pages/iot/device?projectId=${projectId}&projectName=${projectName}`)
		},
		toTel(index) {
			var projectElement = this.listElements[index];
			wx.makePhoneCall({"phoneNumber": projectElement.principalTel});
			//alert("tel:" + projectElement.principalTel);
		},
		
		
	}
	
  }
</script>

<style lang="scss">
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
  
 
  
</style>
